<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-plus" type="primary" size="mini" @click="addProvinceAgent" v-if="p">新增</el-button>
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny" v-if="p">删除</el-button>
        </div>
        <div class="query-form" v-if="p">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="姓名" label-width="50px">
              <el-input v-model="tableSearchParam.agentName" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="真实姓名"
            property="agentName">
          </el-table-column>
          <el-table-column
            label="手机号"
            property="telphone">
          </el-table-column>
          <el-table-column
            label="代理省份">
            <template slot-scope="scope">
              <span>{{convertProvince(scope.row.agencyProvince)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所在省份"
            width="80">
            <template slot-scope="scope">
              <span>{{scope.row.companyRegion.split(',')[0]}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="所在城市"
            width="80">
            <template slot-scope="scope">
              <span>{{scope.row.companyRegion.split(',')[1]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="450">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-view"
                @click="viewData(scope.$index, scope.row)">查看
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-view"
                @click="viewDriverData(scope.$index, scope.row)">下线人员
              </el-button>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                v-if="p"
                @click="editData(scope.$index, scope.row)">修改省代
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-close"
                v-if="p"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page" v-if="p">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="代理人详情" :visible.sync="dialogFormVisible" top="10vh" width="70%">
      <div style="height:400px;overflow-y: auto">
        <el-row>
          <el-col :span="4" class="m-col">真实姓名</el-col>
          <el-col :span="8" class="m-col-left">{{formData.agentName}}</el-col>
          <el-col :span="4" class="m-col-left">手机号</el-col>
          <el-col :span="8" class="m-col-left">{{formData.telphone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col">所属省份</el-col>
          <el-col :span="8" class="m-col-left">{{formData.companyRegion.split(',')[0]}}</el-col>
          <el-col :span="4" class="m-col-left">所属城市</el-col>
          <el-col :span="8" class="m-col-left">{{formData.companyRegion.split(',')[1]}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="m-col-bottom" style="height:350px;border-top: 1px solid #ebeef5;">身份证</el-col>
          <el-col :span="20" class="m-col-bottom-left" style="height:350px;border-top: 1px solid #ebeef5;">
            <div style="margin-top: 25px" v-for="item in formData.idCards">
              <div style="width: 100px;height: 100px;float:left;both:clear;margin-left:20px"
                   @click="showImg(item.url)">
                <img :src="baseUrl+item.url"
                     style="width:100%;height:100%;"></img>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="添加省代" :visible.sync="dialogsProvinceAgentFormVisible" top="10vh" width="55%">
      <el-form :model="provinceAgentformData" style="margin-left: 150px">
        <el-form-item label="救援代理" :label-width="formLabelWidth" prop="name" v-if="actionType=='add'">
          <el-select v-model="provinceAgentformData.agentId" placeholder="请选择" no-data-text="暂无数据" style="width:200px">
            <el-option
              v-for="item in allAgent"
              :key="item.id"
              :label="item.agentName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理省份" :label-width="formLabelWidth" prop="name">
          <el-select v-model="provinceAgentformData.agentProvince" placeholder="请选择" no-data-text="暂无数据"
                     style="width:200px" multiple>
            <el-option
              v-for="item in carRegion"
              :key="item.alias"
              :label="item.province"
              :value="item.alias">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveProvinceAgent" v-if="actionType=='add'">保存</el-button>
        <el-button type="primary" @click="handleUpdateProvinceAgent" v-else>修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看下线人员" :visible.sync="dialogAgentDriverFormVisible" top="10vh" width="70%"
    >

      <el-table
        :data="tableAgentDriverData"
        border
        empty-text="暂无数据"
        style="width: 100%"
        height="400">
        <el-table-column
          type="selection"
          width="35">
        </el-table-column>
        <el-table-column
          label="姓名"
          property="employeeName">
        </el-table-column>
        <el-table-column
          label="公司名"
          property="companyName">
        </el-table-column>
        <el-table-column
          label="手机号"
          property="telphone">
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <el-dialog title="查看图片" :visible.sync="dialogImg1FormVisible" top="10vh">
      <div style="text-align: center">
        <img :src="baseUrl+imgUrl" style="width:80%;height: auto">
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }

  .m-col {
    border: 1px solid #ebeef5;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-left {
    border: 1px solid #ebeef5;
    border-left: none;
    border-bottom: none;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
  }

  .m-col-bottom {
    border: 1px solid #ebeef5;
    border-top: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
    color: #909399;
    font-weight: 500;
  }

  .m-col-bottom-left {
    border: 1px solid #ebeef5;
    border-top: none;
    border-left: none;
    padding-left: 10px;
    height: 250px;
    line-height: 250px;
  }

</style>

<script>
  import rescueAgentApi from '@/api/rescueAgentApi'

  export default {
    created() {
      this.p = this.permissionValid.validAction(this.permissionValid.permissionRule.rescueCompany.listOperationRescueCompany)
      this.initData()
    },
    data() {
      return {
        tableAgentDriverData: [],
        baseUrl: process.env.IMG_BASE_URL,
        allAgent: [],
        carRegion: [
          {alias: '京', province: '北京市'},
          {alias: '津', province: '天津市'},
          {alias: '晋', province: '山西省'},
          {alias: '冀', province: '河北省'},
          {alias: '蒙', province: '内蒙古自治区'},
          {alias: '辽', province: '辽宁省'},
          {alias: '吉', province: '吉林省'},
          {alias: '黑', province: '黑龙江省'},
          {alias: '沪', province: '上海市'},
          {alias: '苏', province: '江苏省'},
          {alias: '浙', province: '浙江省'},
          {alias: '皖', province: '安徽省'},
          {alias: '闽', province: '福建省'},
          {alias: '赣', province: '江西省'},
          {alias: '鲁', province: '山东省'},
          {alias: '豫', province: '河南省'},
          {alias: '鄂', province: '湖北省'},
          {alias: '湘', province: '湖南省'},
          {alias: '粤', province: '广东省'},
          {alias: '桂', province: '广西壮族自治区'},
          {alias: '琼', province: '海南省'},
          {alias: '渝', province: '重庆市'},
          {alias: '川', province: '四川省'},
          {alias: '贵', province: '贵州省'},
          {alias: '云', province: '云南省'},
          {alias: '藏', province: '西藏自治区'},
          {alias: '陕', province: '陕西省'},
          {alias: '甘', province: '甘肃省'},
          {alias: '青', province: '青海省'},
          {alias: '宁', province: '宁夏回族自治区'},
          {alias: '新', province: '新疆维吾尔自治区'},
          {alias: '粤Z港', province: '香港特别行政区'},
          {alias: '粤Z 澳', province: '澳门特别行政区'}
        ],
        dialogsProvinceAgentFormVisible: false,
        provinceAgentformData: {
          agentId: '',
          agentProvince: []
        },
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          agentName: ''
        },
        dialogFormVisible: false,
        formLabelWidth: '70px',
        formData: {
          companyRegion: '',
          idCards: []

        },
        loading: false,
        multipleSelection: [],
        rules: {
          name: [
            {required: true, message: '请输入平台名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        },
        rulesManager: {
          newManagerId: [
            {required: true, message: '请选择负责人', trigger: 'blur'}
          ]
        },
        actionType: 'add',
        dialogAgentDriverFormVisible: false,
        dialogImg1FormVisible: false,
        imgUrl: ''
      }
    },
    methods: {
      showImg(url) {
        this.dialogImg1FormVisible = true
        this.imgUrl = url
      },
      viewDriverData(index, row) {
        rescueAgentApi.listAllAgentDriver(row.id, (res) => {
          this.tableAgentDriverData = res.agencyDevelopDriverInfos
          this.dialogAgentDriverFormVisible = true
        }, () => {
        })

      },
      initData() {
        this.listTableData()
      },
      convertProvince(alias) {
        let ret = ''
        for (var a of alias) {
          console.log(a)

          for (var cr of this.carRegion) {
            if (cr.alias === a) {
              ret += cr.province + ','
              break
            }
          }
        }
        return ret == '' ? '' : ret.substring(0, ret.length - 1)
      },
      listTableData() {
        if (this.p) {
          rescueAgentApi.listProdiverAgent(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
            this.tableData = res.list
            this.total = res.total
          }, () => {
          })
        } else {
          rescueAgentApi.listServiceProdiverAgent(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
            this.tableData = res.list
            this.total = res.total
          }, () => {
          })
        }
      },
      addProvinceAgent() {
        this.provinceAgentformData = {
          agentId: '',
          agentProvince: []
        }
        rescueAgentApi.listAllAgent({}, (res) => {
          this.actionType = 'add'
          this.allAgent = res
          this.dialogsProvinceAgentFormVisible = true
        }, () => {
        })
      },
      handleSaveProvinceAgent() {
        rescueAgentApi.saveProdiverAgent(this.provinceAgentformData, (res) => {
          if (res == '') {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: this.convertProvince(res.split(',')) + '已被代理'
            })
          }
          this.listTableData()
          this.dialogsProvinceAgentFormVisible = false
        }, () => {
        })
      },
      handleUpdateProvinceAgent() {
        rescueAgentApi.updateProdiverAgent(this.provinceAgentformData, (res) => {
          if (res == '') {
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
          } else {
            this.$message({
              type: 'warning',
              message: this.convertProvince(res.split(',')) + '已被代理'
            })
          }
          this.listTableData()
          this.dialogsProvinceAgentFormVisible = false
        }, () => {
        })
      },
      editData(index, row) {
        this.provinceAgentformData = {
          agentId: '',
          agentProvince: []
        }
        this.actionType = 'edit'
        this.provinceAgentformData.agentId = row.id
        this.provinceAgentformData.agentProvince = row.agencyProvince
        this.dialogsProvinceAgentFormVisible = true
      },
      mergeData() {

      },
      handleMerge() {

      },
      viewData(index, row) {
        //清空历史值
        this.formData = {}
        for (var t of this.tableData) {
          if (t.id == row.id) {
            this.formData = t
            break
          }
        }
        this.dialogFormVisible = true
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rescueAgentApi.deleteSingleRescueProvinceAgent(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rescueAgentApi.removeProdiverAgent(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
